<template xmlns="http://www.w3.org/1999/html">
  <div>
    <el-container style=" border: 1px solid #eee; display: flex;" >
      <el-aside :width="sideWidth + 'px'" style="background-color: rgb(255,255,255); display: flex;" >
<!--
 将获取到user被分配上的menu作为参数传送给aside组件
-->
        <Aside  :menus="user.menus"/>
      </el-aside>

      <el-container style="background-color: #ffffff">
        <el-header style="text-align: right; font-size: 12px">
<!--          从aside传递的pathName再传给给Header-->
          <Header :user="user"/>
        </el-header>

        <el-main>
<!--         表示当前页面的子路由会在 route-view中展示-->
          <router-view @refreshUser="getUser"/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import request from "@/utils/request";
import Aside from "@/components/Aside";
import Header from "@/components/Header";

export default {
  name: "Manger",
  components: {Aside,Header},


  data() {
    return {
      sideWidth: 200,
      user: {}
    }
  },
  created() {
    this.getUser()
  },

  methods: {
    getUser(){
      /*let userName = localStorage.getItem("user")*/
      let userName = localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")).userName:""
      this.request.get("/user/username/" + userName).then(res => {
          this.user = res.data
        /*给后台赋值user的用户信息*/
        /*console.log(this.user.menus)*/
      })
    }
  }
}
</script>

<style scoped>


</style>